<!-- 首页 -->
<template>
  <view class="home-container">
    <view class="u-flex u-flex-wrap home-content">
      <view class="item u-border-right u-border-bottom" @click="getStoreList">接口测试 - GET</view>
      <view class="item u-border-bottom" @click="collect">
        <view>接口测试 - POST</view>
        <view>{{ isCollect ? '取消收藏' : '收藏' }}</view>
      </view>
      <view class="item u-border-right" @click="toPagesA">跳转已经预加载的分包 pagesA</view>
      <view class="item" @click="toPagesB">跳转分包 pagesB</view>
    </view>
    <!-- 与包裹页面所有内容的元素同级，且在它的下方 -->
    <tabbar />
  </view>
</template>

<script>
import tabbar from '../../components/tabbar/index.vue';

export default {
  name: 'Home',
  components: { tabbar },
  data() {
    return {
      isCollect: false,
    };
  },
  methods: {
    // 获取店铺列表
    async getStoreList() {
      const res = await this.$api.getStoreList();
      if (res.code === 0) {
        this.$u.toast('请求成功');
        console.log('res :>> ', res);
      }
    },
    // 收藏商品
    async collect() {
      this.isCollect = !this.isCollect;
      const res = await this.$api.test.collect({
        isCollect: this.isCollect ? 1 : 0,
        proId: '85916364784449',
      });
      if (res.code === 0) {
        this.$u.toast('收藏成功');
        console.log('res :>> ', res);
      } else {
        this.isCollect = !this.isCollect;
        const { message = '收藏失败' } = res;
        this.$u.toast(message);
      }
    },
    // to pagesA
    toPagesA() {
      this.$u.route({
        url: '/subPackages/pagesA/home/index',
      });
    },
    // to pagesB
    toPagesB() {
      this.$u.route({
        url: '/subPackages/pagesB/home/index',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  height: 100vh;
  background-color: $uni-bg-color-grey;
  overflow: hidden;
  .home-content {
    margin: 20rpx;
    border-radius: 20rpx;
    background-color: $uni-bg-color;
    .item {
      display: flex;
      flex-direction: column;
      width: 50%;
      height: 200rpx;
      justify-content: center;
      text-align: center;
    }
  }
}
</style>
